<template>
    <div class="preview_body">
        <el-scrollbar height="100%">
            <div class="preview_list">
                <div class="preview_item" v-for="(item, index) in previewList" :key="index">
                    <div class="label">{{ item.label }}:</div>
                    <div class="value">
                        <div v-if="item.label == '地理位置' && item.value == ''"
                            style="display: flex;flex-direction: column;">
                            <div>经度:&nbsp;&nbsp;{{ state.formData.hign.location.longitude }}</div>
                            <div>纬度:&nbsp;&nbsp;{{ state.formData.hign.location.latitude }}</div>
                            <div>精度:&nbsp;&nbsp;{{ state.formData.hign.location.accuracy }}</div>
                        </div>
                        <div v-if="item.label == 'WebGL Info' && item.value == ''"
                            style="display: flex;flex-direction: column;">
                            <div>{{ state.formData.hign.webglInfo.firm }}</div>
                            <div style="display: flex;">{{ state.formData.hign.webglInfo.rendering }}</div>
                        </div>
                        <div v-else>{{ item.value }}</div>
                    </div>
                </div>
            </div>
        </el-scrollbar>
    </div>
</template>

<script setup>
const { store, state } = inject('storejs')

const previewList = computed(() => {
    let a = [
        {
            label: '浏览器',
            value: `${state.formData.base.browser.type} (${getLabel(state.formData.base.browser.version, state.map.Chrome)})`
        }, {
            label: '指纹ID',
            value: `${state.formData.fingerprint_id}`
        }, {
            label: '操作系统',
            value: `${getLabel(state.formData.base.operate, state.map.operate)}`
        }, {
            label: 'User Agent',
            value: `${state.formData.base.userAgent.user_agent}`
        }, {
            label: '语言',
            value: `${state.formData.hign.language.type == 0 ? '基于IP匹配对应的语言' : getLabels(state.formData.hign.language.languages, state.map.languages)}`
        }, {
            label: '时区',
            value: `${state.formData.hign.timeZone.type == 0 ? '基于IP匹配对应的时区' : getLabel(state.formData.hign.timeZone.timeZone, state.map.timeZones)}`
        }, {
            label: '地理位置',
            value: `${state.formData.hign.location.show == 0 ? '禁用' : getlocation()}`
        }, {
            label: '分辨率',
            value: `${state.formData.hign.resolution.type == 2 ? `${state.formData.hign.resolution.resolutionW == '' ? '-' : state.formData.hign.resolution.resolutionW} x ${state.formData.hign.resolution.resolutionH == '' ? '-' : state.formData.hign.resolution.resolutionH}` : getLabel(state.formData.hign.resolution.type, state.map.resolutions)}`
        }, {
            label: '字体列表',
            value: `${state.formData.hign.font.type == 1 ? '真实' : getLabels(state.formData.hign.font.font, state.map.fonts)}`
        }, {
            label: '字体指纹',
            value: `${getLabel(state.formData.hign.fontprint, state.map.fontprints)}`
        }, {
            label: 'WebRTC',
            value: `${getLabel(state.formData.hign.webrtc, state.map.webrtcs)}`
        }, {
            label: 'Canvas',
            value: `${getLabel(state.formData.hign.canvas, state.map.fontprints)}`
        }, {
            label: 'WebGL图像',
            value: `${getLabel(state.formData.hign.webgl, state.map.fontprints)}`
        }, {
            label: 'WebGL Info',
            value: `${state.formData.hign.webglInfo.type == 1 ? '' : getLabel(state.formData.hign.webglInfo.type, state.map.webglInfos)}`
        }, {
            label: 'WebGPU',
            value: `${getLabel(state.formData.hign.webgpu, state.map.webgpus)}`
        }, {
            label: 'AudioContext',
            value: `${getLabel(state.formData.hign.audioContext, state.map.fontprints)}`
        }, {
            label: 'SpeenchVoices',
            value: `${getLabel(state.formData.hign.speechVoices, state.map.speechVoicess)}`
        }, {
            label: '媒体设置',
            value: `${getLabel(state.formData.hign.media, state.map.fontprints)}`
        }, {
            label: '硬件并发数',
            value: `${getLabel(state.formData.hign.concurrency, state.map.concurrencys)}`
        }, {
            label: '设备内存',
            value: `${getLabel(state.formData.hign.memory, state.map.memorys)}`
        }, {
            label: 'Do Not Track',
            value: `${getLabel(state.formData.hign.donottrack, state.map.donottracks)}`
        }, {
            label: '电池',
            value: `${getLabel(state.formData.hign.battery, state.map.batterys)}`
        }, {
            label: '端口扫描保护',
            value: `${getLabel(state.formData.hign.portProtect.type, state.map.speechVoicess)}`
        },
    ]

    return a
})

const getLabel = (value, options) => {
    let a = ''
    options.forEach(item => {
        if (item.value == value) {
            a = item.label
        }
    });
    return a
}

const getLabels = (value, options) => {
    let a = []
    options.forEach(item => {
        if (value.includes(item.value)) {
            a.push(item.label)
        }
    });
    return a.join(', ')
}

const getlocation = () => {
    let a = ''
    if (state.formData.hign.location.type == 0) {
        a = '基于IP匹配对应的地理位置'
    }

    return a
}
</script>

<style lang="scss" scoped>
.preview_body {
    // flex: 1;
    height: calc( 100% - 90px );
    padding-bottom: 16px;
}

.preview_list {
    display: flex;
    flex-direction: column;

    .preview_item {
        display: flex;
        margin-bottom: 8px;

        .label {
            width: 100px;
            display: flex;
            justify-content: flex-end;
            color: #4e5969;
            font-size: 14px;
        }

        .value {
            flex: 1;
            padding-left: 8px;
            color: #1d2129;
            font-size: 14px;
        }
    }
}
</style>